<template>
  <div>
    <div style="font-size:18px;">订单管理</div>
    <hr>
    <br>   
    <div class="filter-container">
      <el-input :disabled="rid==3" @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName">
      </el-input>
      <el-select clearable filterable style="width: 110px" class="filter-item" v-model="listQuery.param.indentStatus" placeholder="订单状态">
        <el-option v-for="item in bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.startTime"
            type="date"
            placeholder="选择开始时间">
          </el-date-picker>
      </div>
      <div class="left filter-item">
          <el-date-picker
            style="width: 200px;display: inline-block;"
            v-model="listQuery.param.endTime"
            type="date"
            placeholder="选择结束时间">
          </el-date-picker>
      </div>
      <el-select clearable filterable style="width: 110px" class="filter-item" v-model="listQuery.param.transportStatus" placeholder="物流状态">
        <el-option v-for="item in gongyingOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="订单编号" v-model="listQuery.param.orderNo">
      </el-input>

      <el-button class="filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- 表身 -->
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 1500px">
      <el-table-column align="center" label="订单编号" width="200">
        <template scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单总价" width="160">
        <template scope="scope">
          <span>{{scope.row.totalPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名" width="160">
        <template scope="scope">
          <span>{{scope.row.userRealName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商铺名" width="160">
        <template scope="scope">
          <span>{{scope.row.shopName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态" width="160">
        <template scope="scope">
          <span>{{scope.row.indentStatus | indentStatus}}</span>
        </template>
      </el-table-column>
   
      <el-table-column align="center" label="商品类型" width="160">
        <template scope="scope">
          <span>{{scope.row.indentType | indentTypes}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="物流状态" width="160">
        <template scope="scope">
          <span>{{scope.row.transportStatus | transportState}}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="创建订单时间">
        <template scope="scope">
          <span>{{scope.row.createDateName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template scope="scope">
          <el-button size="small" type="success"  @click="handleGoDetail(scope.row)">查看
          </el-button>
                   <el-button size="small" type="primary"  @click="handleDetailUpdate(scope.row)">
              更改状态
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNumber"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="detailDialogFormVisible">
      <el-form class="small-space" :model="detailForm" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        
        <el-form-item label="订单号">
          <el-input v-model="detailForm.tradeNo" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="学校名">
          <el-input v-model="detailForm.schoolName" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="店铺名">
          <el-input v-model="detailForm.shopName" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="商品名">
          <el-input v-model="detailForm.productName" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="店铺属性">
          <el-input v-model="detailForm.productLabels" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="商品单价">
          <el-input v-model="detailForm.price" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="detailForm.count" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="店铺名">
          <img width="140" height="140" :src="detailForm.productImg">
          <!-- <el-input v-model="detailForm.productImg" style="width: 200px;"></el-input> -->
        </el-form-item>
        <!-- <el-form-item label="帮会">
          <el-select class="filter-item" style="width: 200px;" v-model="detailForm.organId" placeholder="请选择帮会">
            <el-option v-for="item in  bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
 -->
        

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirmChangeDetail">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 更改状态 -->
    <el-dialog :title="titleUpdate" :visible.sync="detailDialogFormVisibleUpdate">
      <el-form class="small-space" :model="updateStatusTemp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <div align="center">
          <el-form-item label="状态">
            <el-select class="filter-item" style="width: 200px;" v-model="updateStatusTemp.transportStatus" placeholder="请选择状态">
              <el-option v-for="item in updateStatusOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div style="clear:both;"></div>
      <div slot="footer" class="dialog-footer">
          <el-button @click="detailDialogFormVisibleUpdate = false">取 消</el-button>
          <el-button type="primary" @click="comfirmChangeInfo()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    import { orderList } from '../../utils/resourse';

  export default {
    data() {
        return {
          rid: null,
          school: null,
          shop: null,
          detailDialogFormVisible: false,
          detailDialogFormVisibleUpdate: false,
          titleUpdate: '',
          value6: '',
          schoolValue: '',
          titleText:'',
          shopValue:'',
          list: null,
          total: null,
          schoolOptions: [],
          dialogDeleteVisible: false,
          num1: 100,
          listLoading: false,
          listQuery: {
            pageNumber: 1,
            pageSize: 10,
            param: {
                schoolId: '',
                shopType: '',
                shopId:'',
                shopName: '',
                phone: '',
                startTime: null,
                endTime: null,
            },
          },
          detailForm: {
            id: null,
            shopName: null,
            schoolName: null,
            tradeNo: null,
            orderTradeNo: '',
            transportStatus: null,
            productName:'',
            productLabels: '',
            price: '',
            createDateName: '',
            count: '',
            productImg: '',
            productId: '',
            indentStatus: '',
            indentType: '',
            refundReason: '',
          },
          temp: {
            id: undefined,
            importance: 0,
            remark: '',
            timestamp: 0,
            title: '',
            type: '',
            status: ''
          },
          deleteForm: {
            id: '',
            reason: '',
            status: ''
          },
          bangHuiOptions: [
            {id: "0",name: "待付款"},
            {id: "1", name:"已付款"},
            {id: "-1", name:"已退款" },
            {id: "2", name:"退款审核中"},
            {id: "3", name:"退款成功"},
            {id: "4", name:"退款失败"},
          ],
          gongyingOptions: [
            {id: "0", name: "未发货"},
            {id: "1", name: "待发货"},
            {id: "2", name: "待退款"},
          ],
          updateStatusOptions: [
              {id: "1", name:"未发货"},
              {id: "2", name:"待发货"},
              {id: "3", name:"已发货"}
          ],

          updateStatusTemp: {
              id: null,
              transportStatus:'',
              
          },

          // calendarTypeOptions,
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '编辑',
            create: '创建'
          },
          dialogPointVisible: false,
          pvData: [],
          tableKey: 0
        };
    },
    filters: {
      indentState(str) {
        let aa = {
          0: "待付款",
          1: "已付款",
          5: "已退款", 
          2: "退款审核中",
          3: "退款成功",    
          4: "退款失败",
        }
        return aa[str]  
      },
      transportState(str) {
        let transportstate = {
          0: "未发货",
          1: "待发货",
          2: "已发货",
          3: "已签收",    
        }
        return transportstate[str]  
      },
    //订单状态(0：待付款, 1：已付款,-1：已退款    2 退款审核中   3  退款成功    4 退款失败) -->
      indentStatus(str) {
        let indentStatus = {
          0: "待付款",
          1: "已付款",
         "-1": "已退款" ,
          2: "退款审核中",
          3: "退款成功",
          4: "退款失败",
            
        }
        return indentStatus[str]  
      },
      indentTypes(str) {
        let indentTypes = {
          1: "一手商品",
          2: "二手商品",  
        }
        return indentTypes[str]  
      },
      statues(str) {
        let statues = {
          0: "未退换",
          1: "已换货",
          2: "已退货",
        }
        return statues[str]  
      },
      indentState(str) {
        let aa = {
          0: "待付款",
          1: "已付款",
          5: "已退款", 
          2: "退款审核中",
          3: "退款成功",    
          4: "退款失败",
        }
        return aa[str]  
      },
      transportState(str) {
        let transportstate = {
          0: "未发货",
          1: "待发货",
          2: "已发货",
          3: "已签收",    
        }
        return transportstate[str]  
      },
      statues(str) {
        let statues = {
          0: "未退换",
          1: "已换货",
          2: "已退货",
        }
        return statues[str]  
      },
    },
    created(){

      this.rid = localStorage.getItem('rid');
      this.school = JSON.parse(localStorage.getItem('school'));
      this.shop = JSON.parse(localStorage.getItem('shop'));
      this.getschoollist();
      // this.editDialogFormVisible=true;
      // this.detailDialogFormVisible=true;
      // this.showDialog=true;
    },
    mounted(){
        var self=this;
        this.listQuery.param.rid = this.rid
        if(this.rid == 1){     //    平台
        
        }
        // if(this.rid == 2){     //    学校
        //   console.log("4654654");
        //   this.listQuery.param.schoolId = this.school.schoolId
        // }
        if(this.rid!=1){    //    店铺
          this.listQuery.param.shopName = this.shop.shopName
          // this.listQuery.param.shopId = this.shop.shopId
        }
        console.log(this.rid);
        this.getList();
    },
    methods: {
      getschoollist(){
        let self = this;
        let _data = {
            pageNumber: 1,
            pageSize: 10000,
        }
        self.myajax("/school/list",_data,function(res){
            console.log(res)
            if(res.code==1000){
                self.schoolOptions=res.data.list;
            }
        });
      },
      getList(){
        let self = this
        console.log(self.listQuery)
        self.myajax("/indent/lists",self.listQuery,function(res){
          console.log(res)
          self.list = res.data.list
          self.total = res.data.total
        });
      },
      handleChange(value) {
        console.log(value);
      },
      indexMethod(index) {
        return index + 1;
      },
      handleFilter() {       //条件搜索
        this.listQuery.pageNumber = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNumber = val
        this.getList()
      },
      handleChange(value) {  //修改积分时的数字
        // console.log(value);
      },
      handleDelete(row) {
        let index = indexOfArray(row.name,this.list)
        this.$prompt('请输入删除原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showInput: true,
          inputType: 'text',
          inputPlaceholder: '请输入内容',
        }).then(({ value }) => {
          let query = {
            id: row.id,
            status: 3,
            reason: value
          }
          updateStatus(query).then(res =>{
            console.log(res)
            this.list.splice(index,1)
            this.total = this.list.length
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1500
            });
          }).catch(() => {
                  
          });
        }).catch(() => {
                  
        });    
      },
      handleDetailUpdate(row) {
          let self = this;
          self.updateStatusTemp.id = row.id;
          self.detailDialogFormVisibleUpdate = true;
      },
      comfirmChangeInfo() {
        let self=this;
        this.myajax("/indentinfo/updateTransportStatus",self.updateStatusTemp,res=>{
          console.log(self.updateStatusTemp);
          console.log(res);
          if(res.code==1000){
            self.getList();
            self.detailDialogFormVisibleUpdate = false;
            self.$message({
                type: 'success',
                message: '状态已经更改!',
                duration: 2000
            });  
          }
          // self.detailDialogFormVisibleUpdate = false;
        });
      },
      comfirmChangeDetail() {
        this.detailDialogFormVisible = false
      },
      handleGoDetail(row){ 
        let _data = {
            id: row.id
        }
        this.myajax("/indent/info",_data,res=>{
          console.log(888);
          console.log(res);
          if(res.code==1000){
            this.detailForm = res.data[0]
            this.detailDialogFormVisible = true
          }
        });
        // alert('查看订单详情')
      },
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .filter-container {
      padding-bottom: 10px;
    }
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    .avatar {
      width: 90px;
      height: 90px;
      /*border-radius: 50%;*/
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
    }
</style>
